@buttonRadius 				: 		10rpx;
@buttonRound 					: 		40rpx;

@buttonPrimary 				: 		135deg, #8EBDFF 0%, #6582F9 100%;
@buttonPrimaryTxt 		: 		#fff;
@buttonPrimaryShadow 	: 		0px 10px 10px -6px rgba(101,130,249,0.5);

@buttonDisabled 			: 		135deg, #F6F6F6 0%, #E9E9E9 100%;
@buttonDisabledTxt: 				#bbb;
@buttonDisabledShadow : 		0px 14px 20px -8px rgba(34,34,34,0.06);

.sp-button {
	.transition();
	
	&__ {
		
		&small {			
			.size(120, 60);
			.radius(@buttonRadius);
			.font(26, 60, @buttonPrimaryTxt);
		}
		
		&full {
			width: 100%;
			height: 80rpx;
			.font(36, 80, @buttonPrimaryTxt);
		}
		
		&round {
			.radius(@buttonRound);
		}
		
		&primary {
			.back-gradient(@buttonPrimary);
			.shadow(@buttonPrimaryShadow);
		}
		
		&danger {
			color: #fff;
			background: #FF5F5F;
		}
		
		&disabled {
			.back-gradient(@buttonDisabled);
			.shadow(@buttonDisabledShadow);
			color: @buttonDisabledTxt;
		}
		
		&normal {
			color: #222;
			box-shadow: 0 0 1px 1px #ddd inset;
		}
	}
}